
<html>

  <head>
  
    <style type="text/css">

      button.letterButton {
        font-family: Courier;
        width: 20px;
        height: 20px;
        background-color: green;
        color: white;
        border-style: double;
        border-width: 1px;
      }

      #forca {
        position: relative;
        top: 5px;
        left: 65px;
      }

      #head {
        position: absolute; 
        left: 48;
        top: 12;
      }
      
      #body {
        position: absolute;
        left: 60;
        top: 33;
      }
      
      #leftarm {
        position: absolute;
        left: 45;
        top: 45;
      }
      
      #rightarm {
        position: absolute;
        left: 63;
        top: 37;
      }
      
      #leftleg {
        position: absolute;
        left: 45;
        top: 55;
      }
      
      #rightleg {
        position: absolute;
        left: 61;
        top: 55;
      }
      
      img.hidden {
        display:none;
      }
      
      img.showed {
        display: inline;
      }
      
      span.showletter2guess {
        display:inline;
        color:red;
        margin-left: 10px;
      }
    
      #word {
        border-style:solid;
        border-width: 1px;
        padding:2px;
      }
      
      input.restart {
        font-family: Arial;
        font-size: 11px;
        height: 25px;
        margin-top:10px;
        background-color: #FFFFA6;
      }
      
      button.letterButtonDisable {
        font-family: Courier;
        width: 20px;
        height: 20px;
        background-color: red;
        color: white;
        border-style: double;
        border-width: 1px;
      }
    </style>
    
    <script type="text/javascript">
      
      var timerObj = null;
      
      var numberOfWords = 2;
      var availableWords = new Array ("OLA", "TESTE");
      
      var numberOfAttempts = 0;
      var bodyParts = new Array ("head", "body", "leftArm", "rightArm", "leftLeg", "rightLeg");
      
      var allLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
      
      var totalWordLetters;
      
      var correctLetters = 0;
      
      var endGame = false;
      
      function init() 
      {
        numberOfAttempts = 0;
        
        correctLetters = 0;
        
        var lettersObj = document.getElementById("letters");
            
        for(var i= 0; i<allLetters.length; ++i) 
        {
          var newLetterButton = document.createElement("button");
          newLetterButton.value = allLetters.charAt(i);
          newLetterButton.className = "letterButton";
          //newLetterButton.setAttribute("onclick", "alert();");
          newLetterButton.onclick = function() {
            playLetter(this, this.value);
          };
          
          
          lettersObj.appendChild(newLetterButton);
          if(i == 12)
          {
            var separator = document.createElement("br");
            lettersObj.appendChild(separator);
          }
        }
        
        getNewWord();
      }
      
      function getNewWord() 
      {
        var wordObj = document.getElementById("word");
        
        // random number
        var rand_no = Math.random();
        rand_no = rand_no * 2;
        rand_no = Math.ceil(rand_no);
        
        var word2guess = availableWords[rand_no - 1];
        
        totalWordLetters = word2guess.length;

        
        for(var i = 0; i<word2guess.length; ++i) 
        {
          var newLetterTextObj = document.createElement("span");
          newLetterTextObj.className = "showLetter2guess";
          newLetterTextObj.innerText = "_";
          newLetterTextObj.alt = word2guess.charAt(i);

          wordObj.appendChild(newLetterTextObj); 
        }

      }
    
      function playLetter(button, charLetter) {

        if(endGame) return;
        
        //
        
        button.className = "letterButtonDisable";
        button.disable = true;
        
        var bodyObj = document.getElementById(bodyParts[numberOfAttempts]);
        bodyObj.className = "showed";

        showLetter(charLetter);
        
        ++numberOfAttempts;
        
        if(numberOfAttempts == bodyParts.length) 
        {
          alert("the end")
          endGame = true;
          return;
        }

      }
      
      function showLetter(charLetter) {
        var wordObj = document.getElementById("word");
        for(var i = 0; i<wordObj.childNodes.length; ++i) 
        {
          var currNode = wordObj.childNodes[i];
          
          var value = currNode.alt;
          
          if(charLetter == value) {
            currNode.innerText = value;
            ++correctLetters;
          }
          
          if(correctLetters == totalWordLetters) 
          {
            window.clearInterval(timerObj);
            alert("congratulations!! you WIN!!");
            endGame = true;
          }
          
        }        
      }
      
      function tick() 
      {
        var text = document.getElementById("timer").innerText;
        var newTime = parseInt(text) - 1;
        if(newTime == 0) {
          window.clearInterval(timerObj);
          alert("timeout");
          endGame = true;
        }
        document.getElementById("timer").innerText = "" + newTime;
      }
      
      
      function restart() {
        //prepareNewGame(); 
        timerObj = window.setInterval("tick()", 1000);
      }
      
      function prepareNewGame() 
      {
        numberOfAttempts = 0;
        correctLetters = 0;
        
        var wordObj = document.getElementById("word");
      }
      
      
    </script>
    
  </head>
  
  <body onload="init();">
    
    <div id="forca">
      <img id="forcaEmpty" src="forcaImages/forcaEmpty.gif" />
      <img id="head" class="hidden" src="forcaImages/head.gif" />      
      <img id="body" class="hidden" src="forcaImages/body.gif" />
      <img id="leftArm" class="hidden" src="forcaImages/leftArm.gif" />
      <img id="rightArm" class="hidden" src="forcaImages/rightArm.gif" />
      <img id="leftLeg" class="hidden" src="forcaImages/leftLeg.gif" />
      <img id="rightLeg" class="hidden" src="forcaImages/rightLeg.gif" />
    </div>
    
    
    <div id="letters">
    </div>

    <div id="word">
    </div>
    
    <span class="timer" id="timer">30</span>&nbsp;segs
        
    <input type="button" value="Restart" class="Restart" onclick="restart();" />

  </body>

</html>
